<!-- 页面配置 -->

<template>
  <div style="height:500px">
    <el-form ref="form" label-width="120px" class="paddingTop" :model="pageInfo" size="small">
      <component
        v-for="(item, index) in widgetConfigs"
        :key="index"
        :is="item.component"
        :config="item"
        :data="pageInfo"
      />
    </el-form>
  </div>
</template>

<script lang="ts">
import { ref, computed, inject, defineComponent, onMounted } from "vue";
import { designEditKey } from "@/hooks/lowcode/keys";
import type { TypeDesignProvide, TypeWidget } from "@/types/TypeDesign";

export default defineComponent({
  setup(props, context) {
    const { pageInfo } = inject(designEditKey) as TypeDesignProvide;

    onMounted(() => {
      console.log("pageInfo", pageInfo);
    });

    const widgetConfigs = [
      {
        name: "页面宽",
        key: "width",
        component: "AInput",
        labelWidthAuto: false,
        visible: true,
        hidden: false,
        attrs: {
          placeholder: "请输入页面宽",
        },
      },
      {
        name: "页面高",
        key: "height",
        component: "AInput",
        labelWidthAuto: false,
        visible: true,
        hidden: false,
        attrs: {
          placeholder: "请输入页面高",
        },
      },
      {
        name: "背景颜色",
        key: "backgroundColor",
        component: "AColorPicker",
        pos: "base",
        labelWidthAuto: false,
        visible: true,
        hidden: false,
        attrs: {},
      },
      {
        name: "是否显示网格",
        key: "showGridLayer",
        component: "ASwitch",
        pos: "base",
        labelWidthAuto: false,
        visible: true,
        hidden: false,
        attrs: {},
      },
      {
        name: "是否显示标尺",
        key: "showMarkLayer",
        component: "ASwitch",
        pos: "base",
        labelWidthAuto: false,
        visible: true,
        hidden: false,
        attrs: {},
      },
      {
        name: "是否自动对齐网格",
        key: "snapToGrid",
        component: "ASwitch",
        pos: "base",
        labelWidthAuto: false,
        visible: true,
        hidden: false,
        attrs: {},
      },
    ];
    return {
      pageInfo,
      widgetConfigs,
    };
  },
});
</script>
